<template>
  <div class="creat-wrop">
    <div v-if="pageType !== 'new'" class="creat-wrop_line"><span style="padding-left: 5px;">{{'基本信息'}}</span></div>
    <el-form v-if="pageType !== 'new'" ref="editForm" :model="editForm" label-width="180px" class="creat-wrop_edit">
      <el-form-item label="委外计划单号">
        <span>12</span>
      </el-form-item>
      <el-form-item label="创建人">
        <span>12</span>
      </el-form-item>
      <el-form-item label="创建时间">
        <span>12</span>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="editForm.desc"></el-input>
      </el-form-item>
    </el-form>
    <div v-if="pageType !== 'new'" class="creat-wrop_line"><span style="padding-left: 5px;">{{'商品信息'}}</span></div>
    <el-button type="primary" size="small" @click="onOpen">点击上传</el-button>
    <el-table
      :data="tableData"
      class="creat-wrop_table">
      <el-table-column
        prop="date"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品编码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="address"
        label="单位">
      </el-table-column>
      <el-table-column
        prop="address"
        label="规格">
      </el-table-column>
      <el-table-column
        prop="address"
        label="数量">
      </el-table-column>
    </el-table>
    <el-form ref="addForm" :model="addForm" label-width="80px">
      <el-form-item label="备注">
        <el-input type="textarea" v-model="addForm.desc"></el-input>
      </el-form-item>
    </el-form>
    <div v-if="pageType !== 'new'" class="creat-wrop_edit_floor">
      <el-button type="primary" size="small" @click="onOpen">返回</el-button>
      <el-button type="primary" size="small" @click="onOpen">提交</el-button>
      <el-button size="small" @click="onOpen">返回</el-button>
    </div>
    <el-dialog title="导入明细" :visible.sync="dialogFormVisible" width="30%">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" size="small" @click="onUploadFile">下载模版</el-button>
        </el-col>
        <el-col :span="24">
          <p style="margin-top: 20px;">仅支持csv、xls、xlsx文件、且文件大小不得超过XX商品明细表.xls</p>
        </el-col>
      </el-row>
      <div slot="footer" class="creat-wrop_dialog_footer">
        <el-button type="primary" @click="dialogFormVisible = false">导入</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import FormMarker from '@/components/createPage/createMarker'
// import { Promise } from 'q';

export default {
  components: {},
  data () {
    return {
      pageType: null,
      tableData: [],
      editForm: {},
      addForm: {},
      dialogFormVisible: false
    }
  },
  mounted () {
    this.pageType = this.$route.params.id
  },
  methods: {
    onOpen () {
      this.dialogFormVisible = true
    },
    onUploadFile () {},
    handlePreview () {},
    handleRemove () {},
    beforeRemove () {},
    handleExceed () {}
  }
}
</script>
<style lang="scss" scoped>
.creat-wrop{
  background-color: white;
  padding: 20px;
  .el-row{
    text-align: center;
  }
  &_table{
    width: 100%;
    margin: 20px 0;
  }
  &_edit{
    margin: 0 200px;
    &_floor{
      text-align: center;
    }
  }
  &_line{
    border-left: 5px #409EFF solid;
    margin: 20px 0;
  }
}
</style>